<template>
  <div>
       <div  class="table-region">
            <div class="table-title" slot="table-title">
                <span class="table-title-span">设备详情</span>
            </div>
            <el-table :data="deviceDetailList" style="width: 100%" v-loading="loading" border>
                <el-table-column label="视角" align="center" prop="sAreaName">
                     <template scope="scope">
                        <span>{{scope.row.sAngleView?scope.row.sAngleView:'--'}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="摄像机配置" align="center" prop="camera">
                    <template scope="scope">
                        <span>{{scope.row.hasClassTimeRule=='1'?'已安装':'未安装'}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="listQuery.total" :current-page.sync="listQuery.page" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
            </div>
       </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapGetters } from 'vuex';
import { pageAirClassAreas} from 'api/deviceManagement';
export default {
    name: 'classRegion',
    data() {
        return {
            formInline: {
                schoolName: '',
                schoolNameList: [],
                schoolId: ''
            },
            listQuery: {// 分页
                page: 1,
                total: 0
            },
            loading: true,
            schoolLoading: false,        
            deviceDetailList: [],
            rules: {
                schoolId: [{ required: true, message: '请输入学校名称' }]
            },
            getSchoolInfor: null
        }
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表

        }),
        ...mapGetters([
            'uid',
            'schoolName',
            'schoolId'
        ])
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.searchFetchData();
        }
    },

    created() {
        this.searchFetchData();// 查询列表
        this.formInline.schoolName=this.schoolName;
        this.formInline.schoolId=this.schoolId;
    },
    methods: {
        ...mapActions(['ChangePageSize']),
       
        // 查询列表
        searchFetchData() {
            this.loading=true;
            let page = this.listQuery.page;
            let rows = this.config.pageSize;
            let sSchoolId=this.schoolId;// 学校id数组
            pageAirClassAreas(page, rows, sSchoolId).then(res => {
                this.loading=false;
                this.deviceDetailList=res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total;
            }).catch(() => {
                this.loading=false;
            });

        },
         // 分页
        handleSizeChange(val) {
            this.loading = true;
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.searchFetchData();
        },
        handleCurrentChange(val) {
            this.loading = true;
            this.listQuery.page = val;
            this.searchFetchData();
        }
    }
}
</script>
<style lang="scss" scoped>
    .formInline {
        .formBtn {
            width: 100%;
            height: 70px;
            border-top: 1px solid #dddddd;
            position: relative;
            .btnPosition {
                position: absolute;
                right: 0px;
                top: 18px;
            }
        }
    }
    .table-region{
        margin: 20px 2px 2px;
         box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
       .pagination-container {
            text-align: right;
            padding: 20px 0;
            padding-right: 20px;
            background: #fff;
        }
    }
    .table-title {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        color: #333;
        font-size: 18px;
        background: #fff;
    }
</style>

